<template>
    <div class="process-monitoring-box">
        <commpVxeTable
         :key="dataTableKey"
         :config="dataTableConfig" 
         :columns="columnsVxe" 
         :formItem="formItem"
         :conditionBtnRow="true"
         :searchType="true"
         ref="acceptanceRegistrationRef"
         @checkboxChange="selectedRowKeysChange"
         @searchEvent="searchEvent"
         @resetEvent="resetEvent"
         >
            <template v-slot:externalOperations="{data}">
                <!-- <vxe-form-item>
                    <template>
                        <a-button class="blue-btn" type="primary" @click="newlyAddedClick({},false)">新增</a-button>
                    </template>
                </vxe-form-item> -->
                
                <vxe-form-item>
                    <template>
                        <a-button class="blue-btn" type="primary" @click="deactivateClick()">停用</a-button>
                    </template>
                </vxe-form-item>
                <vxe-form-item>
                    <template>
                        <a-button class="blue-btn" type="primary" @click="restoreClick()">恢复</a-button>
                    </template>
                </vxe-form-item>
                <vxe-form-item>
                    <template>
                        <a-upload style="display: inline-block;" :showUploadList="false" :beforeUpload="beforeUpload" action="" @change="importTraining">
                            <a-button class="blue-btn" type="primary" >导入</a-button>
                        </a-upload>
                    </template>
                </vxe-form-item>
                <vxe-form-item>
                    <template>
                        <a-button class="blue-btn" type="primary" @click="exportTraining()">导出</a-button>
                    </template>
                </vxe-form-item>
                <vxe-form-item>
                    <template>
                        <a-button class="blue-btn" type="primary" @click="exportTemplate()">导出模板</a-button>
                    </template>
                </vxe-form-item>
                <vxe-form-item>
                    <template>
                        <a-button class="blue-btn" type="primary" @click="resetPasswordClick()">重置密码</a-button>
                    </template>
                </vxe-form-item>
            </template>
            <!-- <template v-slot:fjcylb_slotName="{row}">
                <compSelector
                v-model="category"
                :defaultValue="category"
                compType="Checkbox"
                dictionaryType="检查员登记类别"
                @selectHandleChange="($event)=>{dataTableConfig.paramet={...dataTableConfig.paramet,flx:category.length?category.join(','):''}}"
                />
            </template> -->
            <template v-slot:sex_default="{row}">
                <span>{{ row.sex == 1?'男':'女' }}</span>
            </template>
            <template v-slot:username_name="{row}">
                <a @click="viewClick(row,true)">{{ row.username }}</a>
            </template>
            <template v-slot:fgzdw_orgName="{row}">
                {{ row.fgzdw }}{{ row.orgName }}
            </template>
            <template v-slot:status_name="{row}">
                {{ row.status == 1?'正常':'冻结' }}
            </template>
            <template v-slot:flx_name="{data}" >
                <a-tree-select
                    :style="{width: data.widthStringT}"
                    v-modal:value="flxVlaue"
                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                    placeholder="请选择专家分类"
                    allow-clear
                    multiple
                    tree-default-expand-all
                    @change="onChange"
                >
                    <a-tree-select-node v-for="(item,index) in flxList" :key="index+'-'+item.type1" :value="item.type1" :title="item.type1">
                        <a-tree-select-node v-for="(trem,tIndex) in item.type2List" :key="item.type1+'&'+trem" :value="item.type1+'&'+trem" :title="item.type1+'-'+trem">
                        </a-tree-select-node>
                    </a-tree-select-node>
                </a-tree-select>
            </template>
            <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                <a-form layout="inline" class="search-form" >
                    <a-form-item >
                        <a-button class="blue-btn" type="primary" @click="infoClick(row,false)">修改档案</a-button>
                    </a-form-item>
                    <a-form-item >
                        <a-button class="blue-btn" type="primary" @click="modifyClick(row,false)">修改身份</a-button>
                    </a-form-item>
                    <a-form-item >
                        <a-button class="blue-btn" type="primary" @click="viewClick(row,true)">查看</a-button>
                    </a-form-item>
                </a-form>
            </template>
        </commpVxeTable>
        <increase ref="increaseRef" @successChange="successChange"/>
        <modifyInfo ref="modifyInfoRef" @successChange="successChange"/>
    </div>
</template>
<script>
import assessCheckApi from './service/api'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import blobType from '@/common/blobType'
import moment from 'moment'
import increase from './increase.vue'
import compSelector from '@/components/compSelector/compSelector.vue'
import modifyInfo from './modifyInfo.vue'
import {
    jcyglexportJcyData,
    jcyglimpJcyFileData,
    jcyglenableAccount,
    jcyglstopAccount,
    jcyglresetPwd,
    jcygldownJcyTemplate,
    dictzjflDict,
} from './service/index'
export default {
    components:{
        commpVxeTable,
        increase,
        compSelector,
        modifyInfo,
    },
    props:{
        fuserid:{
            type:String,
            default:'8',
            required:false,
        },
    },
    data(){
        return{
            category:[],
            dataTableKey:null,
            addEditParameter:{},
            formItem:[
                {
                    label: '账户状态',
                    model: 'status',
                    type:'Select',
                    dictionaryType:'账户状态'
                },{
                    label: '账号', 
                    model: 'username',
                },{
                    label: '手机号',
                    model: 'phone',
                    searchType:'收起',
                },{
                    label: '身份证号',
                    model: 'fsfzh',
                },{
                    label: '姓名',
                    model: 'realname',
                    searchType:'收起',
                },{
                    label: '工作单位',
                    model: 'fgzdw',
                },{
                    label: '所属库',
                    model: 'fssk',
                    type:'Select',
                    dictionaryType:'核查员所属库',
                    searchType:'收起',
                },{
                    label: '学历',
                    model: 'fxl',
                    type:'Select',
                    dictionaryType:'学历代码',
                    searchType:'收起',
                },{
                    label: '性别',
                    model: 'sex',
                    type:'Select',
                    dictionaryType:'性别',
                    searchType:'收起',
                },{
                    label: '专家分类',
                    model: 'flx',
                    slotName:'flx_name'
                    
                }
                // ,{
                //     label: '专家分类',
                //     model: 'flx',
                //     type:'Checkbox',
                //     dictionaryType:'检查员登记类别',
                //     convert:true,
                    
                // }
                ],//
            columnsVxe:[
            { 
                type: 'checkbox', 
                width: 60 ,
                fixed: 'left'
            },{
                title: '账号', //列头显示文字
                field: 'username',
                slots: { header:'username_header',default: 'username_name' },
                titleInterval:true,
                width:100,
            },{
                title: '手机号码', //列头显示文字
                field: 'phone',
                width:115,
            },{
                title: '身份证号', //列头显示文字
                field: 'fsfzh',
                width:185,
            },{
                title: '姓名', //列头显示文字
                field: 'realname',
                slots: { header:'realname_header',},
                titleInterval:true,
                width:90,
            },{
                title: '学历', //列头显示文字
                field: 'fxl',
                slots: { header:'fxl_header',},
                titleInterval:true,
                width:115,
            },{
                title: '性别', //列头显示文字
                field: 'sex',
                titleInterval:true,
                slots: {
                    header:'sex_header',
                    default:'sex_default',
                },
                width:70,
            },{
                title: '工作单位以及部门',
                field: 'fgzdw',
                slots: { default: 'fgzdw_orgName' },
                
            },{
                title: '账户状态',
                field: 'status',
                slots: { default: 'status_name' },
                width:80,
            },{
                title: '创建时间',
                field: 'createTime',
                width:152,
            },{
                title: '操作',
                field: 'id',
                slots: { default: 'operation_btn' },
                fixed: 'right',
                width:185,
            }],
            dataTableConfig:{
                api: assessCheckApi.list,
                rowId: 'id',
                paramet:{

                }
            },
            selectedRowKeysArr:[],
            searchFrom:{},
            flxVlaue:[],
            flxList:[],
            flxRes:[],
            
            
        }
    },
    mounted(){
        this.getData()
    },
    methods:{
        initDataMountedData(res){
            console.log('我获取到了什么树形88',res)
        },
        getData(){
            dictzjflDict().then(res=>{
                if(res.code == 200){
                    console.log('我获取到了什么树形',res)
                    this.flxList = res.result
                }else{

                }
            })
        },
        searchEvent(searchFrom){//搜索
            this.searchFrom = {...this.dataTableConfig.paramet,...searchFrom}
        },
        resetEvent(){
            this.flxVlaue = []
            this.flxRes = []
            this.category = []
            this.dataTableConfig.paramet={...this.dataTableConfig.paramet,flx:''}
        },
        selectedRowKeysChange(row){//获取选中表格rowKey
            this.selectedRowKeysArr = []
            row.forEach(item => {
                this.selectedRowKeysArr.push(item.id)
            });
        },
        successChange(){//新增或保存后刷新列表
            this.$refs.acceptanceRegistrationRef.searchEvent()
        },
        //-------------------
        newlyAddedClick(row,val){
            this.$refs.increaseRef.visible = true
            this.$refs.increaseRef.getData(row,val)
        },
        infoClick(row){
            this.$refs.modifyInfoRef.getData({...row,isOwn:true})
            this.$refs.modifyInfoRef.visible = true
        },
        modifyClick(row,val){
            this.$refs.increaseRef.visible = true
            this.$refs.increaseRef.getData(row,val)
        },
        viewClick(row,val){
            this.$refs.increaseRef.visible = true
            this.$refs.increaseRef.getData(row,val)
        },
        beforeUpload(){
            return false
        },
        importTraining({file}){
            var that = this
            if(typeof file.uid !== 'undefined') {
                if(file.name.indexOf(".xls") !== -1 || file.name.indexOf(".xlsx") !==-1) {
                    const fileData = new FormData();
                    fileData.append("file",file);
                    jcyglimpJcyFileData(fileData).then(res => {
                        if(res.code == 200){
                            this.$refs.acceptanceRegistrationRef.searchEvent()
                            this.dataTableKey = Date.now()
                            that.$message.success(res.message)
                        }else{
                            that.$message.warning(res.message)
                        }
                        //console.log(res)
                    }).catch(error =>{
                        that.$message.warning('导入失败')
                    })
                }
                
            }
        },
        exportTraining(){
            var that = this
            var fileName = '审评员账户管理'
            let param = { }
            if(that.selectedRowKeysArr.length){
                param = {
                    ids:that.selectedRowKeysArr.join(','),
                }
            }else{
                param = {...that.searchFrom}
            }
            
            jcyglexportJcyData(param).then((data) => {
                this.leadingOutLoading = false
                if (!data) {
                    that.$message.warning('文件下载失败')
                    return
                }
                if (typeof window.navigator.msSaveBlob !== 'undefined') {
                    window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
                } else {
                    let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', fileName + '.xls')
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link) //下载完成移除元素
                    window.URL.revokeObjectURL(url) //释放掉blob对象
                }
            })
        },
        exportTemplate(){
            var fileName = '审评员账户管理模板'
            jcygldownJcyTemplate().then(data=>{
                if (!data) {
                    that.$message.warning('文件下载失败')
                    return
                }
                if (typeof window.navigator.msSaveBlob !== 'undefined') {
                    window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
                } else {
                    let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', fileName + '.xls')
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link) //下载完成移除元素
                    window.URL.revokeObjectURL(url) //释放掉blob对象
                }
            })
        },
        deactivateClick(){//停用
            var that = this
            if(this.selectedRowKeysArr.length){
                this.$confirm({
                    title:'确认要停用吗？',
                    // icon: createVNode(ExclamationCircleOutlined),
                    onOk() {
                        jcyglstopAccount({ids:that.selectedRowKeysArr.join(',')}).then(res=>{
                            if(res.code == 200){
                                that.dataTableKey = Date.now()
                                that.$message.success(res.message)
                            }else{
                                that.$message.warning(res.message)
                            }
                        })
                    }
                })
            }else{
                this.$message.warning('请先选择停用项')
            }
        },
        restoreClick(){//恢复
            var that = this
            if(this.selectedRowKeysArr.length){
                this.$confirm({
                    title:'确认要恢复吗？',
                    // icon: createVNode(ExclamationCircleOutlined),
                    onOk() {
                        jcyglenableAccount({ids:that.selectedRowKeysArr.join(',')}).then(res=>{
                            if(res.code == 200){
                                that.dataTableKey = Date.now()
                                that.$message.success(res.message)
                            }else{
                                that.$message.warning(res.message)
                            }
                        })
                    }
                })
            }else{
                this.$message.warning('请先选择恢复项')
            }
        },
        resetPasswordClick(){//重置密码
            var that = this
            if(this.selectedRowKeysArr.length){
                this.$confirm({
                    title:'确认要重置密码吗？',
                    // icon: createVNode(ExclamationCircleOutlined),
                    onOk() {
                        jcyglresetPwd({ids:that.selectedRowKeysArr.join(',')}).then(res=>{
                            if(res.code == 200){
                                that.dataTableKey = Date.now()
                                that.$message.success(res.message)
                            }else{
                                that.$message.warning(res.message)
                            }
                        })
                    }
                })
            }else{
                this.$message.warning('请先选择重置密码项')
            }
        },
        async onChange(value, node){
            console.log('selectvalue',value)
            let res= []
            let arr = value.filter(a=>a.indexOf('&') == -1)
            let zjArr = value.filter(a=>a.indexOf('&') !== -1)
            if(arr.length && zjArr.length){
                arr.forEach((item,index)=>{
                    res.push({fj:item,zj:zjArr.filter(k=>k.indexOf(item) !== -1)})
                })
            }else if(arr.length){
                res = arr
            }else if(zjArr.length){
                let fjArr = []
                await zjArr.forEach((item,index)=>{
                    let i = item.split('&')
                    let dd = fjArr.filter(u=>u == i[0])
                    if(!dd.length){
                        fjArr.push(i[0])
                    }
                    
                })
                fjArr.forEach((item,index)=>{
                    res.push({fj:item,zj:zjArr.filter(k=>k.indexOf(item) !== -1)})
                })
            }
            console.log('最终结果',res)
            let resArr = res.map(i=>{return {fj:i.fj?i.fj:i,zj:i.zj && i.zj.length?i.zj.map(k=>{return k.split('&')[1]}):[]}})
            console.log('最终结果2',resArr)
            // res.map(a=>{ return a.fj+a.})
            this.flxRes = resArr.map(a=>{return a.zj.length?a.fj+'('+a.zj.join('、')+')':a.fj})
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
                flx:this.flxRes.length?this.flxRes.join(','):'',
            }
            this.$refs.acceptanceRegistrationRef.searchEvent()
        },
    }
}
</script>